<template>
  <div class="box">
    <div class="kindheader">
      <van-icon name="arrow-left" size="26" @click="$router.back()" />
      <div class="search"  @click="$router.push('/search')">
        <i class="iconfont icon-fangdajing"></i>&nbsp;
        <p>请输入搜索关键字</p>
      </div>
      <van-icon name="ellipsis" size="26" />
    </div>
    <div class="main" >
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="(item, index) in categoryList"
          :key="index"
          :title="item"
        />
      </van-sidebar>

      <div class="mainright">
        <div>
          <h4>热门品牌</h4>
        </div>
        <div class="tagbox">
          <van-tag
            type="primary"
            size="large"
            v-for="(item, index) in categoryBrandList"
            :key="index"
            @click="jumpTo(categoryList[activeKey],item.brand)"
            >{{ item.brand }}</van-tag
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryList, getCategoryBrandList } from "../api/kind";
import Vue from "vue";
import { Sidebar, SidebarItem, Tag } from "vant";

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Tag);
export default {
  name: "Kind",
  data() {
    return {
      category:"",
      categoryList: [],
      activeKey: 0,
      categoryBrandList: [],
    };
  },
  methods: {
    onChange(index) {
      this.activeKey = index;
      this.getCategoryBrandList()
    },
    getCategoryBrandList() {
      getCategoryBrandList({
        category: this.categoryList[this.activeKey],
      }).then((res) => {
        console.log(res);
        this.categoryBrandList = res.data.data;
      });
    },
    jumpTo(category,brand){
      this.$router.push("/brandlist/"+category+"/"+brand)
    }
  },
  components: {},
  created() {
    getCategoryList().then((res) => {
      console.log(res.data);
      this.categoryList = res.data.data;
      this.getCategoryBrandList()
    });
  },
};
</script>

<style scoped>
.kindheader {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.14rem;
  height: 0.44rem;
}
.kindheader .search {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 66%;
  height: 70%;
  background: rgb(243, 243, 243);
  border-radius: 0.4rem;
  color: #999;
  padding: 0 0.2rem;
}
.kindheader .search p {
  font-size: 0.14rem;
}
.kindheader .search i:nth-child(1) {
  font-weight: 900;
  margin-right: 0.04rem;
}
.main {
  display: flex;
  justify-content: space-between;
}
::v-deep .van-sidebar {
  width: 24%;
}
::v-deep .van-sidebar::-webkit-scrollbar {
  display: none;
}
.mainright {
  flex: 1;
}
.mainright h4 {
  padding: 0.2rem 0.2rem;
  font-size: .16rem;
  font-weight: 900;
}
.mainright .tagbox {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
}
::v-deep .van-tag{
  margin: .1rem;
  background: rgb(192, 192, 192);
}
</style>